<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" name="viewport">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>抽奖</title>

</head>

<style>

  html,body{
    width: 100%;
    height: 100%;
    max-width: 750px;
    margin: auto;
  }

  .outBox{
    width: 500px;
    height: 500px;
    background: lightpink;
    position: relative;
    display: flex;
    flex-flow: row wrap;

  }

  .prize{
    width: 20%;
    height: 20%;
    margin: 2% 3%;
    text-align: center;
    font-size: x-small;
    color: #fff;
    padding-top: 6%;
    box-sizing: border-box;
    border: 6px double #AB945E;
  }

  .prize.active{
    background: indianred;
  }



</style>



<body>
<div>
    <h1>九宫格抽奖</h1>
    <p>打开后台console可以看到获奖信息</p>
</div>
<div class="outBox" id="lotteryBoxs">
    <div class="prize prize-0 one">1</div>
    <div class="prize prize-1 two">2</div>
    <div class="prize prize-2 three">3</div>
    <div class="prize prize-7 four">4</div>
    <div class="prize">
      <button class="btn">start</button>
    </div>
    <div class="prize prize-3 six">6</div>
    <div class="prize prize-6 seven">7</div>
    <div class="prize prize-5 eight">8</div>
    <div class="prize prize-4 nine">9</div>
</div>




</body>


<script src="http://code.jquery.com/jquery-2.2.4.min.js"></script>
<script>



  $(document).ready(function() {

    var lottery = {
      index: 0, //当前转动到哪个位置，起点位置
      count: 0, //总共有多少个位置
      timer: 0, //setTimeout的ID，用clearTimeout清除
      speed: 10, //初始转动速度
      times: 0, //转动次数
      cycle: 30, //转动基本次数：即至少需要转动多少次再进入抽奖环节
      prize: 0, //中奖位置
      init: function(id) {
        if ($("#" + id).find(".prize").length > 0) {
          $lottery = $("#" + id);
          $units = $lottery.find(".prize");
          this.obj = $lottery;
          this.count = $units.length-1;
        }
      },
      roll: function() {
        var index = this.index;
        var count = this.count;
        var lottery = this.obj;
        $(lottery).find(".prize").removeClass("active");
        index += 1;
        if (index > count - 1) {
          index = 0;
        }
        $(lottery).find(".prize-" + this.index).addClass("active");
        this.index = index;
        return false;
      },
      stop: function(index) {
        this.prize = index;
        return false;
      }
    };

    // 中奖转动事件
    function roll() {
      lottery.times += 1;
      lottery.roll();
      var prize_site = $("#lotteryBoxs").attr("prize_site");
      if (lottery.times > lottery.cycle + 10 && lottery.index == prize_site) {
        var prize_id = $("#lotteryBoxs").attr("prize_id");
        var prize_name = $("#lotteryBoxs").attr("prize_name");
        console.log(prize_site+"结果")
        //中奖情况的判断--模态框
        if(prize_site == 0 || prize_site == 1 || prize_site == 2|| prize_site == 3|| prize_site == 4|| prize_site == 5|| prize_site == 6|| prize_site == 7){
          //已中奖
          setTimeout(function(){
            console.log("恭喜你获得" + prize_name)
          },500)
        }else{
          //未中奖
          setTimeout(function(){
            console.log("中奖结果：" + prize_name)
          },500)

        }

        clearTimeout(lottery.timer);
        lottery.prize = -1;
        lottery.times = 0;
        click = false;

      } else {
        if (lottery.times < lottery.cycle) {
          lottery.speed -= 20;
        } else if (lottery.times == lottery.cycle) {
          var index = Math.random() * (lottery.count) | 0;
          lottery.prize = index;
        } else {
          if (lottery.times > lottery.cycle + 10 && ((lottery.prize == 0 && lottery.index == lottery.count - 1) || lottery.prize == lottery.index + 1)) {
            lottery.speed += 90;
          } else {
            lottery.speed += 30;
          }
        }
        if (lottery.speed < 30) {
          lottery.speed = 30;
        }
        lottery.timer = setTimeout(roll, lottery.speed);
      }
      return false;
    }

    var click = false;


    $(function() {
      lottery.init('lotteryBoxs');
      $(".btn").click(function() {
        if (click) {
          return false;
        } else {
          lottery.speed = 100;

          //此处数据应该从接口获取
          var prizeArr=["一等奖","二等奖","三等奖","四等","五等","六等","七等","八等",]
          var prizeId = Math.floor(Math.random()*(7)+0);
          var prize_site = prizeId;
          console.log("位置"+prizeId);
          $("#lotteryBoxs").attr("prize_site", prize_site );
          $("#lotteryBoxs").attr("prize_name", prizeArr[prizeId]);
          roll();
          click = true;
          return false;

        }
      });
    })

  });



</script>


</html>